<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局样式</title>
	<link rel="stylesheet" href="../../include/css/public.min.css">
	<link rel="stylesheet" href="../../include/css/iconfont.min.css">
	<link rel="stylesheet" href="../doc-lib/solarized-light.css">
	<link rel="stylesheet" href="../doc-lib/doc.css">
</head>
<body>
    <div class="page-cont">
		<div class="crumb"></div>
		<div class="page-title">
			<h2>全局样式</h2>
			<p>重置默认样式，尽可能保证在所有浏览器中的一致性。</p>
		</div>
		<div class="section">
			<h4 class="section-title"><i class="iconfont icon-subtraction"></i> 样式统一</h4>
			<div class="section-cont">
				ARM UI 使用 <a href="http://thx.github.io/cube/doc/neat" target="_blank">Neat.css</a> 来统一样式，并对部分细节做了调整：
				<ul class="ml20 mt10">
					<li>移除了 IE6/7 的 Hack 代码；</li>
					<li>移除了已被 W3C 废弃的标签，如 <code>hgroup</code>；</li>
					<li>html 添加 <code>-webkit-font-smoothing: antialiased;</code> 抗锯齿。</li>
				</ul>
			</div>
		</div>
		<div class="section">
			<h4 class="section-title"><i class="iconfont icon-subtraction"></i> 字体定义</h4>
			<div class="section-cont">
				<p>字体选用上，ARM UI 优先使用现代字体，注重平台兼容性好、小字显示清晰和阅读辨识度高。</p>
				<div class="grid-row">
					<div class="grid-col grid-col-3"><strong>文字大小</strong></div>
					<div class="grid-col grid-col-9"><strong>示例</strong></div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						超小（12px）
					</div>
					<div class="grid-col grid-col-9" style="font-size:12px">
						<p>床前明月光，疑是地上霜</p>
						<p>The quick brown fox jumps over the lazy dog.</p>
						<p>1234567890</p>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						普通（14px）
					</div>
					<div class="grid-col grid-col-9" style="font-size:14px">
						<p>床前明月光，疑是地上霜</p>
						<p>The quick brown fox jumps over the lazy dog.</p>
						<p>1234567890</p>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						大（20px）
					</div>
					<div class="grid-col grid-col-9" style="font-size:20px">
						<p>床前明月光，疑是地上霜</p>
						<p>The quick brown fox jumps over the lazy dog.</p>
						<p>1234567890</p>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						特大（28px）
					</div>
					<div class="grid-col grid-col-9" style="font-size:28px">
						<p>床前明月光，疑是地上霜</p>
						<p>The quick brown fox jumps over the lazy dog.</p>
						<p>1234567890</p>
					</div>
				</div>
			</div>
		</div>
    </div>
    <script src="../../include/js/jquery-1.11.3.min.js"></script>
    <script src="../../include/js/public.min.js"></script>
</body>
</html>
